<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			nav ul li:nth-child(1)::before {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1vw;
				background-color: #c55a5c;
				transition: all .3s;
			}
		</style>
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/orders.css">
		<link rel="icon" href="./icon/title_vagetable.png">
		<title>我的订单页面</title>
		<script src="./js/axios.min.js"></script>
		<script src="./js/axios.config.js"></script>
	</head>
	<body>
		<header>
			<img class="arrow" src="./img/shippingAddress/back.png" onclick="window.history.back(-1)" alt="">
			<span class="name">我的订单</span>
		</header>
		<nav>
			<ul>
				<li data-num="0">待付款</li>
				<li data-num="1">待发货</li>
				<li data-num="2">待收货</li>
				<li data-num="3">待评价</li>
				<li data-num="4">已完成</li>
			</ul>
		</nav>
		<div class="main order_0" data-order="0">
			<ul class="list">
				<li>
					<div class="top">
						<div class="state">等待买家付款</div>
						<div class="time">2020-07-15 10:25:30</div>
					</div>
					<div class="detail">
						<img src="./icon/title_vagetable.png" alt="">
						<div class="right">
							<div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
							<div class="info">
								<div class="information">容量30L</div>
								<div class="price">￥520</div>
								<div class="num"><span>x</span> 1</div>
							</div>
						</div>
					</div>
					<div class="order">共<span>1</span>件商品 合计：<span>￥520.00</span></div>
					<div class="btn">
						<button type="button">取消订单</button>
						<button class="pay" type="button">立即付款</button>
					</div>
				</li>
				<li>
					<div class="top">
						<div class="state">等待买家付款</div>
						<div class="time">2020-07-15 10:25:30</div>
					</div>
					<div class="detail">
						<img src="./icon/title_vagetable.png" alt="">
						<div class="right">
							<div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
							<div class="info">
								<div class="information">容量30L</div>
								<div class="price">￥520</div>
								<div class="num"><span>x</span> 1</div>
							</div>
						</div>
					</div>
					<div class="order">共<span>1</span>件商品 合计：<span>￥520.00</span></div>
					<div class="btn">
						<button type="button">取消订单</button>
						<button class="pay" type="button">立即付款</button>
					</div>
				</li>
				<li>
					<div class="top">
						<div class="state">等待买家付款</div>
						<div class="time">2020-07-15 10:25:30</div>
					</div>
					<div class="detail">
						<img src="./icon/title_vagetable.png" alt="">
						<div class="right">
							<div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
							<div class="info">
								<div class="information">容量30L</div>
								<div class="price">￥520</div>
								<div class="num"><span>x</span> 1</div>
							</div>
						</div>
					</div>
					<div class="order">共<span>1</span>件商品 合计：<span>￥520.00</span></div>
					<div class="btn">
						<button type="button">取消订单</button>
						<button class="pay" type="button">立即付款</button>
					</div>
				</li>
			</ul>
		</div>
		<div class="main order_1" data-order="1"></div>

		<div class="main order_2" data-order="2">
			<ul class="list">
				<li>
					<div class="top">
						<div class="state">卖家已发货</div>
						<div class="time">2020-07-15 10:25:30</div>
					</div>
					<div class="detail">
						<img src="./icon/title_vagetable.png" alt="">
						<div class="right">
							<div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
							<div class="info">
								<div class="information">容量30L</div>
								<div class="price">￥520</div>
								<div class="num"><span>x</span> 1</div>
							</div>
						</div>
					</div>
					<div class="order">共<span>1</span>件商品 合计：<span>￥520.00</span></div>
					<div class="btn">
						<button type="button">查看物流</button>
						<button class="pay" type="button">确认收货</button>
					</div>
				</li>
				<li>
					<div class="top">
						<div class="state">卖家已发货</div>
						<div class="time">2020-07-15 10:25:30</div>
					</div>
					<div class="detail">
						<img src="./icon/title_vagetable.png" alt="">
						<div class="right">
							<div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
							<div class="info">
								<div class="information">容量30L</div>
								<div class="price">￥520</div>
								<div class="num"><span>x</span> 1</div>
							</div>
						</div>
					</div>
					<div class="detail">
						<img src="./icon/title_vagetable.png" alt="">
						<div class="right">
							<div class="title">高端GNF不锈钢脚踏垃圾桶家用40L大容量30L厨房25L客厅8L有盖</div>
							<div class="info">
								<div class="information">容量30L</div>
								<div class="price">￥520</div>
								<div class="num"><span>x</span> 1</div>
							</div>
						</div>
					</div>
					<div class="order">共<span>1</span>件商品 合计：<span>￥520.00</span></div>
					<div class="btn">
						<button type="button">查看物流</button>
						<button class="pay" type="button">确认收货</button>
					</div>
				</li>
			</ul>
		</div>
		<div class="main order_3" data-order="3"></div>
		<div class="main order_4" data-order="4"></div>
		<script>
			// 获取元素
			let oUl = document.querySelector('nav ul')
			let Arr = []
			for (let i = 0; i < 5; i++) {
				Arr.push(document.querySelector(`.order_${i}`))
			}

			// 切换模块函数
			function change(id) {
				// console.log(this);
				// console.log(id);
				id = isNaN(id) ? id.target.dataset.num: id
				// console.log(id.target.dataset.num);
				// console.log(this.dataset.num);
				for (let j = 0; j < oUl.children.length; j++) {
					oUl.children[j].dataset.order = false
				}
				console.log(id);
				oUl.children[id].dataset.order = true
				document.styleSheets[0].addRule('nav ul li:nth-child(1)::before', `left:${20*id}vw`)
				Arr.forEach(function(item) {
					item.style.display = 'none'
					if (item.dataset.order == id) {
						item.style.display = 'block'
					}
				})
			}

			// 获取参数
			let id = Number(location.search.replace(/[^\d]/g, ""))
			change(id)

			Array.from(oUl.children).forEach(function(item, index) {
				// console.log(item.dataset.order)
				item.addEventListener('click', change)
			})
		</script>
	</body>
</html>
